<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> ajax GET 请求</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<button>点击发送请求</button>
<div></div>
<script>
// 获取 button 元素
const btn = document.querySelector('button');
// 获取 div 元素
const div = document.querySelector('div');
// 绑定点击事件
btn.onclick=function (){
    // 创建 xhr 对象
    const xhr = new XMLHttpRequest();
    // 初始化，设置请求方法和url及是否异步
    xhr.open('GET','http://127.0.0.1:3000/server',true);
    // 设置请求头
    // 发送请求
    xhr.send();
    // 事件绑定 处理服务端返回的结果
    /**
     *
     * onreadystatechange 事件会在 readyState 属性改变时触发
     * readyState 属性表示请求状态，共有5种状态：
     * 0：请求未初始化
     * 1：服务器连接已建立
     * 2：请求已接收
     * 3：请求处理中
     * 4：请求已完成，且响应已就绪
     */
    xhr.onreadystatechange=function (){
        //  判断请求是否成功
        if(xhr.readyState===4 && xhr.status >=200 && xhr.status<300) {
            console.log(xhr.status) // 响应状态码
            console.log(xhr.statusText) // 响应状态信息
            console.log(xhr.getAllResponseHeaders()); // 所有响应头
            console.log(xhr.responseText); // 响应体
            div.innerHTML = xhr.responseText; // 将响应体数据存入div
        }
    }
}
</script>
</body>
</html>